import { ref,reactive,getCurrentInstance, onMounted } from "vue";
import countAnimate from "@/components/common/countAnimate.vue";
import cardsLine from "@/components/common/cardsLine.vue";
import homeChart from "@/components/echarts/homeChart.vue";
import cardsLines from "@/components/common/cardsLines.vue";

import api from '@/api/statistic/index'

export function useHome(){
  const { proxy } = getCurrentInstance();
  const loading = ref(true);

  const homeChartRef=ref(null);

  const cardsLinesRef=ref(null);

  const homeData = [
    {
      title: "今日新增用户",
      value: 20,
      icon: "el-icon-user-solid",
      unitColor:'success',
      unit: "人",
      bgColor: "#fff",
      subTitle: "总用户",
      subValue: 1000,
      computeType:'年'
    },
    {
      title: "支付订单",
      value: 30,
      icon: "el-icon-user-solid",
      unitColor:'primary',
      unit: "笔",
      bgColor: "#fff",
      subTitle: "总支付订单",
      subValue: '800',
      computeType:'年'
    },
    {
      title: "订单量",
      value: 555,
      icon: "el-icon-user-solid",
      unitColor:'warning',
      unit: "笔",
      bgColor: "#fff",
      subTitle: "转化率",
      subValue: '60',
      computeType:'年'
    },
    {
      title: "销售金额",
      value: 9898.56,
      icon: "el-icon-user-solid",
      unitColor:'danger',
      unit: "元",
      bgColor: "#fff",
      subTitle: "总销售金额",
      subValue: 110256.5,
      computeType:'年'
    },
  ]

  const catsData=[
    {
      title:'用户',
      icon: 'user',
      path: '/',
      color: 'text-light-blue-500',
    },
    {
      title:'商品',
      icon: 'shopping-cart',
      path: '/',
      color: 'text-purple-500',
    },
    {
      title:'订单',
      icon: 'tickets',
      path: '/',
      color: 'text-yellow-500',
    },
    {
      title:'评价',
      icon: 'chat-dot-square',
      path: '/',
      color: 'text-teal-500',
    },
    {
      title:'资源库',
      icon: 'picture',
      path: '/',
      color: 'text-rose-500',
    },
    {
      title:'公告',
      icon: 'bell',
      path: '/',
      color: 'text-green-500',
    },
    {
      title:'用户',
      icon: 'user',
      path: '人',
      color: 'text-light-blue-500',
    },
    {
      title:'配置',
      icon: 'set-up',
      path: '/',
      color: 'text-light-blue-500',
    },
  ]

  const chartProps=[
    { title: "近一个月", value: "month" },
    { title: "近一周", value: "week" },
    { title: "近24小时", value: "day" },
  ]

  const productsProps=[
    {
      title:'CMS系统',
      tip:'近一个月客户情况',
      type: 'danger',
      path: '/',
      color: 'text-light-blue-500',
      children:[
        {
          title:'新增客户',
          num:1112,
          unit: '个',
          type: 'danger',
        },
        {
          title:'覆盖区域',
          num:21,
          unit: '个',
          type: 'primary',
        },
        {
          title:'访问次数',
          num:231156,
          unit: '次',
          type: 'success',
        },
        {
          title:'客户总量',
          num:52162,
          unit: '个',
          type: 'warning',
        },
      ]
    },
    {
      title:'SHOP系统',
      tip:'近一个月销售情况',
      type: 'danger',
      path: '/',
      color: 'text-light-blue-500',
      children:[
        {
          title:'在售产品',
          num:123,
          unit: '个',
          type: 'success',
        },
        {
          title:'库存预警',
          num:58,
          unit: '个',
          type: 'danger',
        },
        {
          title:'已售罄',
          num:33,
          unit: '个',
          type: 'warning',
        },
        {
          title:'销售金额',
          num:856223,
          unit: '原',
          type: 'primary',
        },
      ]
    },
  ]

  function getHomeData(){
    loading.value = true;
    api.getHomeStatistic().then((res)=>{
      console.log("首页统计数据: ",res);
      loading.value = false;
      homeData.value = res.data;
    }).catch((e)=>{
      proxy.$messageInfo.notific.error(e);
      console.log("首页统计数据失败: ",e);
    }).finally(()=>{
      loading.value = false;
    });
  }

  function getUserProductData(){
    loading.value = true;
    api.getUserProductStatistic().then((res)=>{
      console.log("首页-产品统计数据: ",res);
      loading.value = false;
      homeData.value = res.data;
    }).catch((e)=>{
      proxy.$messageInfo.notific.error(e);
      console.log("首页-产品统计数据失败: ",e);
    }).finally(()=>{
      loading.value = false;
    });
  }

  function cardClick(item){
   console.log("接收cardClick: ",item); 
  }

  function changeChartType(e){
    console.log("chartt改变：",e)
  }

  onMounted(()=>{
    setTimeout(()=>{
      loading.value = false;
    },500)
  })

  return {
    loading,
    homeData,
    getHomeData,
    countAnimate,
    cardsLine,
    catsData,
    cardClick,
    homeChart,
    homeChartRef,
    chartProps,
    cardsLines,
    cardsLinesRef,
    productsProps,
    getUserProductData,
  }
  
}